<template>
  <div class="service-list-container">
    <el-input placeholder="请输入搜索内容"></el-input>
    <!--    <thing-tree ref="thingTreeRef" :load-method="getTreeData"></thing-tree>-->
    <custom-tree-v2
      ref="thingTreeRef"
      :show-checkbox="true"
      :initTreeData="onInitTreeData"
      :props="{label:'name',value:'id',children:'lowServiceList'}"
      @onNodeExpand="onNodeExpand"
    ></custom-tree-v2>
    <div class="service-list-footer">
      <el-button link @click="onCancelClick">取消</el-button>
      <el-button type="primary" @click="onOKClick">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import CustomTreeV2 from '@/components/common/custom-tree-v2/index.vue'
import {
  useTree,
} from '@/components/form-designer/setting-panel/data-source-setting/subscription-service/composable/use-subscription-tree'
import { ServiceType, ServiceVersionVOType } from '@coolphk/shared-types/low-code'
import { cloneDeep } from 'lodash-es'
import {
  useCloneFormServiceVersionVOs,
  useLatestServiceVersionVOs,
} from '@/components/form-designer/setting-panel/data-source-setting/subscription-service/composable/use-service'
import { getCurrentServiceVersionVOByService } from '@/api/serviceVersion'

defineOptions({
  name: 'subscription-service-poplist',
})
const visible = defineModel()

const { thingTreeRef, onInitTreeData, getCheckedNodes, onNodeExpand } = useTree()
const cloneFormServiceVersionVOs = useCloneFormServiceVersionVOs()
const currentServiceVersionVOs: ServiceVersionVOType[] = useLatestServiceVersionVOs()
const onCancelClick = () => {
  visible.value = false
}
/**
 * 当点击确定按钮时触发该函数
 * 该函数的主要作用是处理用户在poplist中选择的service数据
 * 并将未存在于服务列表中的service添加到formConfig.serviceVersionVOs中
 */
const onOKClick = () => {
  // emits('onOKClick', getCheckedNodes(true))
  const checkedServices = getCheckedNodes(true)
  console.log('poplist onOKClick', cloneFormServiceVersionVOs)
  checkedServices.forEach(async (service: ServiceType) => {
    // 检查服务列表中是否已存在当前节点的服务
    const isExistingService = cloneFormServiceVersionVOs.value.some(item => item.service.id == service.id)
    // 如果服务列表中不存在当前节点的服务，则查询出当前服务的最新版本，并添加到服务列表中
    if (!isExistingService) {
      const latestServiceVersionVO = await getCurrentServiceVersionVOByService(service)
      currentServiceVersionVOs.push(latestServiceVersionVO)
      const cloneSVO = cloneDeep(latestServiceVersionVO)
      delete cloneSVO.service.currentVersionId
      cloneFormServiceVersionVOs.value.push(cloneSVO)
      console.log('serviceVersionVOs', cloneFormServiceVersionVOs)
    }
  })
  visible.value = false
}
onBeforeUnmount(() => {
  console.log('poplist unMount')
})
</script>

<style scoped lang="scss">
.service-list-container {
  //height: 60vh;
  display: flex;
  flex-direction: column;
  width: 20vw;
  overflow: hidden;

  .service-list-main {
    margin-top: 10px;
    width: 100%;
  }

  .service-list-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}

:deep(.ep-cascader-menu__wrap) {
  height: 100%;
}
</style>
